<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <!-- <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> -->
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <link rel="stylesheet" href="assets/css/element.css">
    <!-- 引入组件库 -->
    <script src="assets/js/element.js"></script>
    <!-- Required CSS files -->
    <link href="assets/css/fonts.css" rel="stylesheet">


    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/css/mycss.css">

    <link rel="stylesheet" href="assets/css/barfiller.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
    <div id="app">
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
            <el-form :model="form" style="text-align: left;">
                <el-form-item label="新密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="再次输入新密码：" :label-width="formLabelWidth">
                    <el-input v-model="rePassword" type="password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="modify()">确 定</el-button>
            </div>
        </el-dialog>
        <div class="preloader">
            <span class="preloader-spin"></span>
        </div>
        <div class="site">
            <header>
                <div class="container">
                    <div class="row">
                        <div class="col-6 col-sm-3 logo-column">
                            <a href="index.html" class="logo" style="color:#fff;font-size:22px">
                                <img src="assets/img/logo.png" alt="logo">&nbsp电脑DIY技术分享
                            </a>
                        </div>
                        <div class="col-6 col-sm-9 nav-column clearfix">
                            <div class="right-nav">
                                <span class="search-icon fa fa-search"></span>
                                <form action="" class="search-form" @submit.prevent="checkForm">
                                    <input v-model="s" type="search" placeholder="请输入关键字">
                                    <button type="submit">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </form>
                            </div>
                            <nav id="menu" class="d-none d-lg-block">
                                <ul>
                                    <li v-if="userInfo.name" class="has-child">
                                        <a href="mine.html">
                                            <img :src="userInfo.headImg" style="width:30px;height:30px;border-radius:50%" alt=""> {{userInfo.name}}
                                        </a>
                                        <ul class="sub-menu" style="z-index: 1000">
                                            <li>
                                                <a @click="logout">注销</a>
                                            </li>
                                            <li>
                                                <a @click="dialogFormVisible = true">修改密码</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li v-else>
                                        <a style="cursor:pointer;color:#acbbce" @click="toLogin">登录</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </header>
        </div>
        <h1 style="text-align:center;margin:20px">话题贴发布</h1>
        <el-card style="width:90%;padding:20px;text-align:center;margin:0 auto;z-index: 10;">
            <div style="float:left;margin-top:40px;z-index: 100;">
                <el-input v-model="title" placeholder="请输入标题" style="float:left;margin-top:10px"> </el-input>
                <el-select v-model="moduleId" placeholder="请选择发布版块" style="float:left;margin:10px 0 10px 0;">
                    <el-option v-for="item in options" :key="item.moduleId" :label="item.NAME" :value="item.moduleId">
                    </el-option>
                </el-select>
                <!-- 详情页面 -->
            </div>
        </el-card>
        <br>
        <el-card style="width:90%;padding:20px;text-align:left;margin:0 auto; z-index: 2;">
            <div class="editor">
                <div ref="toolbar" style="width:100%;margin:0px auto" class="toolbar">
                </div>
                <div ref="editor" style="width:100%;margin:0px auto;border:1px solid #bbb;height:500px" class="text">
                </div>
            </div>
            <el-button v-if="param.id==undefined" type="success" @click="publish(1)" style="float:right;width: 70px;height: 70px;position: fixed;bottom: 40px;right:40px"
                icon="el-icon-position" circle>
                发布
            </el-button>
            <el-button v-if="param.id" type="warning" @click="publish(2)" style="float:right;width: 70px;height: 70px;position: fixed;bottom: 40px;right:40px"
                icon="el-icon-position" circle>
                修改
            </el-button>

        </el-card>

    </div>
    <!-- body container -->



    <script src="assets/js/editor.js"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="assets/js/jquery-2.2.4.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <script src="assets/js/vendor/owl.carousel.min.js"></script>
    <script src="assets/js/vendor/isotope.pkgd.min.js"></script>
    <script src="assets/js/vendor/jquery.barfiller.js"></script>
    <script src="assets/js/vendor/loopcounter.js"></script>
    <script src="assets/js/vendor/slicknav.min.js"></script>
    <script src="assets/js/active.js"></script>

</body>
<script>
    var E = window.wangEditor
    // var editor = new E('#divDemo')
    var app = new Vue({
        el: '#app',
        data: {
            s: '',
            contenter: {},
            moduleId: '',
            param: null,
            title: '',
            content: '',
            options: [],
            form: {
                password: ''
            },
            dialogFormVisible: false,
            rePassword: '',
            userInfo: '',
            editor: null
        },
        methods: {
            pub() {
                let _this = this

                if (_this.$data.userInfo == '') {
                    _this.$message.error("请先登录！")
                    return false
                }
                location.href = ("publish.html")

            },
            modify() {
                if (this.form.password != this.rePassword) {
                    this.$message.error('两次输入的密码不一致，请重新输入')
                    return false
                }
                axios({
                    method: 'PUT',
                    headers: {
                        'token': sessionStorage.getItem('token'),
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    url: `http://127.0.0.1:888/member/password?password=${this.form.password}`,
                }).then((re) => {
                    console.log('re', re)
                    if (re.data.code === 2) {
                        this.$message({
                            message: '修改成功，请重新登录',
                            type: 'success'
                        });
                        setTimeout('location.href=("login.html")', 1000)

                    }
                    else if (re.data.code === 1) {
                        this.$message.error('登录超时')
                    } else {
                        this.$message.error(re.data.content)
                    }
                })
            },
            checkForm(param) {
                let _this = this
                let searchUrl = encodeURI(`list.html?s=${_this.$data.s}`);   //使用encodeURI编码
                let code = escape(_this.$data.s)
                location.href = (`list.html?s=${code}&id=3`)
            },
            toLogin() {
                location.href = (`login.html?backUrl=${escape(document.location.pathname + document.location.search)}`)
            },
            logout() {
                axios({
                    method: 'get',
                    headers: {
                        'token': sessionStorage.getItem('token'),
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    url: 'http://127.0.0.1:888/member/out',
                }).then((re) => {
                    console.log('re', re)
                    if (re.data.code === 0) {
                        this.$message({
                            message: '注销成功',
                            type: 'success'
                        });
                        sessionStorage.removeItem('userInfo')
                        setTimeout('location.href=("index.html")', 500)

                    }
                })
            },
            publish(key) {
                this.content = this.editor.$textElem['0'].innerHTML

                if (this.title === '') {
                    this.$message.error('请输入标题')
                    return;
                }
                if (this.moduleId === '') {
                    this.$message.error('请选择模块')
                    return;
                }
                if (this.content.length < 50) {
                    this.$message.error('内容太少啦~')
                    return;
                }

                let data = { "content": this.content, "title": this.title, "moduleId": this.moduleId }
                if (key == 1) {
                    console.log('s')
                    axios({
                        method: 'POST',
                        data: data,
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/json',
                        },
                        url: 'http://127.0.0.1:888/invitation/add',
                    }).then((re) => {
                        console.log(';re', re)
                        if (re.data.code === 0) {
                            this.$message({
                                message: '发布成功 可以到我的个人信息查看',
                                type: 'success'
                            });
                            setTimeout('location.href=("mine.html")', 1500)

                        } else if (re.data.code === 1) {
                            this.$message.error(re.data.content)
                        }
                    })
                }
                if (key == 2) {
                    let _this = this
                    delete data.moduleId
                    data.id = parseInt(this.$data.param.id)
                    console.log('data', _this.$data.content)
                    axios({
                        method: 'PUT',
                        data: data,
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/json',
                        },
                        url: 'http://127.0.0.1:888/invitation/invitation',
                    }).then((re) => {
                        console.log('re', re)
                        if (re.data.code === 0) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            setTimeout(`location.href=("detail.html?id=${this.$data.contenter.id}&mid=${this.$data.contenter.module_id}")`, 900)

                        }
                    })
                }



            },
            GetRequest() {
                var url = location.search; //获取url中"?"符后的字串  
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
        },
        mounted() {
            this.editor = new E(this.$refs.toolbar, this.$refs.editor)
            this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
            this.editor.customConfig.menus = [
                'head', // 标题
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'quote', // 引用
                'emoticon', // 表情
                'image', // 插入图片
                'table', // 表格
                'video', // 插入视频
                'code', // 插入代码
                'undo', // 撤销
                'redo', // 重复
                'fullscreen' // 全屏
            ]
            this.editor.customConfig.zIndex = 4
            this.editor.create()
            axios({
                method: 'get',
                headers: {
                    'token': sessionStorage.getItem('token'),
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                url: 'http://127.0.0.1:888/module/list',
            }).then((re) => {
                if (re.data.code === 0) {
                    console.log(re.data)
                    this.$data.options = re.data.content
                }
            })
        },
        created() {
            let _this = this
            let param = _this.GetRequest()
            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            console.log('user', userInfo)

            if (userInfo != null) {
                this.$data.userInfo = userInfo
            }
            _this.$data.param = param
            if (param.id != undefined && param.id != "") {
                axios({
                    method: "GET",
                    headers: {
                        'token': sessionStorage.getItem('token'),
                    },
                    url: `http://127.0.0.1:888/invitation/detail/${param.id}`,
                }).then((res) => {
                    console.log('res,', res)
                    if (res.data.code === 0) {
                        _this.$data.contenter = res.data.content
                        _this.$data.title = res.data.content.title
                        _this.$data.moduleId = res.data.content.module_id
                        this.editor.$textElem['0'].innerHTML = res.data.content.content
                    } else {
                        _this.$message.error(res)
                        setTimeout("location.href=('mine.html')", 700)
                    }
                })
            }

            // http://127.0.0.1:888/invitation/detail/${param.id ? param.id : 20}
        }
    })

</script>



</html>